<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="button1">按钮1</button>
    <button id="button2">按钮2</button>
    <button id="button3">按钮3</button>

    <script>
        // var setCommand = function (button, command) {
        //     button.onclick = function () {
        //         command.execute()
        //     }
        // }

        var setCommand = function (button, command) {
            button.onclick = function () {
                command.execute()
            }
        }

        var MenuBar = {
            //刷新菜单的业务逻辑
            refresh: function () {
                console.log("刷新菜单的业务逻辑")
            }
        }

        var SubMenu = {
            add: function () {
                console.log("增加子菜单")
            },
            del: function () {
                console.log("删除子菜单")
            },
        }

        function RefreshMenuBarCommand(receiver) {
            return {
                execute: function () {
                    receiver.refresh()
                }
            }
        }

        function AddSubMenuCommand(receiver) {
            return {
                execute: function () {
                    receiver.add()
                }
            }
        }

        function DelSubMenuCommand(receiver) {
            return {
                execute: function () {
                    receiver.del()
                }
            }
        }

        var refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar)
        var addSubMenuCommand = AddSubMenuCommand(SubMenu)
        var delSubMenuCommand = DelSubMenuCommand(SubMenu)

        setCommand(button1, refreshMenuBarCommand)
        setCommand(button2, addSubMenuCommand)
        setCommand(button3, delSubMenuCommand)

        // //定义刷新的命令累:
        // class RefreshMenuBarCommand {
        //     constructor(receiver) {
        //         this.receiver = receiver
        //     }
        //     execute() {
        //         this.receiver.refresh()
        //     }
        // }
        // //定义添加子菜单的命令类
        // class AddSubMenuCommand {
        //     constructor(receiver) {
        //         this.receiver = receiver
        //     }
        //     execute() {
        //         this.receiver.add()
        //     }
        // }
        // //定义删除子菜单的命令类
        // class DelSubMenuCommand {
        //     constructor(receiver) {
        //         this.receiver = receiver
        //     }
        //     execute() {
        //         this.receiver.del()
        //     }
        // }

        // var refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar)
        // var addSubMenuCommand = new AddSubMenuCommand(SubMenu)
        // var delSubMenuCommand = new DelSubMenuCommand(SubMenu)

        // setCommand(button1, refreshMenuBarCommand)
        // setCommand(button2, addSubMenuCommand)
        // setCommand(button3, delSubMenuCommand)



    </script>
</body>

</html>